<template>
  <div class="faceImg">
    <div class="image">
      <droppable
        class="drop-box"
        @dragstart="onDragStart"
        @dragend="onDragEnd"
        @drop="onDrop"
        @dragenter="onDragEnter"
        @dragover="onDragOver"
        @dragleave="onDragLeave"
      >
        <div class="drag-content">
          <img v-if="!!fileUrl" :src="fileUrl" alt="" />
          <svg-icon v-else class-name="search-icon" :icon-class="fileItem.icon"></svg-icon>
        </div>
      </droppable>
    </div>
    <h4><slot></slot></h4>
    <p>点击或拖拽上传</p>
    <i class="el-icon-delete face-close" title="清除照片！" @click="clearImg"></i>
  </div>

</template>

<script>

import Droppable from '@/components/Drag/droppable';
export default {
  name: 'DroppableUpload',
  components: { Droppable },
  props: {
    fileItem: {
      type: Object,
      default: () => {}
    },
    fileUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      imgUrl: '',
      over: false
    };
  },
  methods: {
    clearImg() {
      this.fileUrl = '';
    },
    onDragStart(params) {
      // console.log('监听到拖动开始');
    },
    onDragEnd(params) {
      // console.log('监听到拖动结束');
    },
    onDrop(params) {
      this.fileUrl = params.data.imgUrl;
    },
    onDragEnter(params) {
      // console.log('监听到被拖动元素进入当前范围');
    },
    onDragOver(params) {
      // this.imgUrl = params.data.imgUrl;
      // console.log('监听到被拖动元素在上方移动, 这个调用调多次就不打印了')
    },
    onDragLeave(params) {
      // console.log('监听到被拖动元素离开当前范围');
    }
  }
};
</script>

<style lang="scss" scoped>
  *{
    margin: 0;
    padding: 0;
  }
  h3{
    margin-bottom: 20px;
  }
  .faceImg{
    width: 100%;
    height: 180px;
    border: 1px solid #E6E6E6;
    border-radius: 20px;
    /*background: #FF69B4;*/
    position: relative;
    .face-close{
      position: absolute;
      right: 5px;
      top: 5px;
      color: #ccc;
      display: none;
      &:hover{
        color:#508FCC;
      }
    }
    .search-icon{
      width: 100%;
      height: 100%;
    }
    &:hover{
      .face-close{
        display: inline-block;
      }
    }
  }
  .image{
    width: 126px;
    height: 126px;
    /*background: #508FCC;*/
    // border: 1px solid #E6E6E6;
    margin: 0px auto;
    .drop-box{
      width: 100%;
      height: 100%;
      .drag-content{
         width: 100%;
        height: 100%;
        text-align: center;
        img{
          width: 100%;
        }
      }
    }
  }
  h4{
    font-size: 14px;
    font-weight: 400;
    line-height: 17px;
    color: #707070;
    text-align: center;
    padding-bottom: 7px;
  }
  p{
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
    color: #508FCC;
    margin-bottom: 12px;
    text-align: center;
  }
</style>
